<template>
  <template v-if="item.editItem.component == 'input'">
    <span v-if="!scope.row.show">{{ data }}</span>
    <el-input v-else v-model="data" size="small" :type="item.editItem.type"></el-input>
  </template>
  <template v-if="item.editItem.component == 'select'">
    <span v-if="!scope.row.show">{{ data }}</span>
    <el-select
      v-else
      v-model="dataCode"
      size="small"
      :multiple="item.editItem.multiple ? item.editItem.multiple : false"
      clearable
      filterable
      collapse-tags
      :max-collapse-tags="2"
      :multiple-limit="item.editItem.limit"
    >
      <el-option
        v-for="node in item.editItem.data"
        :key="node.value"
        :label="node.label"
        :value="node.value"
      ></el-option>
    </el-select>
  </template>
  <template v-if="item.editItem.component == 'switch'">
    <span v-if="!scope.row.show">{{ data }}</span>
    <el-switch
      v-else
      v-model="dataCode"
      :active-value="item.editItem.activeValue"
      :inactive-value="item.editItem.inactiveValue"
    >
    </el-switch>
  </template>
  <template v-if="item.editItem.component == 'datePicker'">
    <span v-if="!scope.row.show">{{ data }}</span>
    <el-date-picker
      v-else
      v-model="data"
      :type="item.option.dateType"
      :shortcuts="item.editItem.shortcuts"
      :default-time="item.editItem.defaultTime"
      :value-format="item.editItem.valueFormat"
      size="small"
    />
  </template>
</template>
<script setup>
import { deepClone } from "@/utils/arr";
import { ref, computed, watch, toRefs } from "vue";
const emit = defineEmits(["editData"]);
const props = defineProps({
  item: {
    type: Object,
    defalut: {},
  },
  scope: {
    type: Object,
    defalut: {},
  },
});
const { item, scope } = toRefs(props);
const dataCode = ref();
let row =deepClone(scope.value.row)
if (props.item.editItem.codeFieldName) {
  dataCode.value = row[item.value.editItem.codeFieldName];
}
const data = ref();
data.value = row[item.value.prop];
watch(data, (newValue) => {
  let params = {
    value: newValue,
  };
  emit("editData", params);
});
watch(dataCode, (newValue) => {
  let params = {
    value: newValue,
    code: props.item.editItem.codeFieldName,
  };
  emit("editData", params);
});
</script>